<template>
    <div class="app-container">
        <el-form>
            <div class="params-form">
                <el-form-item label="我的账户">
                    <el-select-v2 v-model="filterParams.walletId" filterable :options="myAccountOptions" placeholder="请输入"
                        style="flex:1" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="filterParams.keywords" />
                </el-form-item>
                <el-form-item label="发生时间">
                    <el-date-picker v-model="filterParams.date" value-format="YYYY-MM-DD" type="daterange" unlink-panels range-separator="——"
                        start-placeholder="开始时间" end-placeholder="结束时间" />
                </el-form-item>
                <el-form-item>
                    <div class="end-buttons">
                        <el-button type="primary" @click="getTradeListData">查询</el-button>
                        <el-button plain @click="reset">重置</el-button>
                    </div>
                </el-form-item>
            </div>
        </el-form>
        <div class="table">
            <el-table :data="tradeListData" max-height="calc(100vh - 260px)">
                <el-table-column prop="memberName" label="账户" />
                <el-table-column prop="relatedMemberName" label="往来账户" />
                <el-table-column prop="usableMoney" label="金额" />
                <el-table-column prop="createTime" label="发生时间" />
                <el-table-column prop="remark" label="描述" />
                <template #empty>
                    <el-empty />
                </template>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="filterParams.current" v-model:page-size="filterParams.size"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="getTradeListData" @current-change="getTradeListData" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { getTradeList,getWalletAccountList } from "@/apis/purse";
import useUserStore from "@/store/modules/user";
import { tenantParams } from "@/utils/config";
import { useRoute } from "vue-router";

const route = useRoute();
const userStore = useUserStore();
/**
 * 租户Id
 */
const tenantId = computed(() => userStore.userInfo.tenantId);
const filterParams = ref({
    current: 1,
    size: 10,
    walletId:route.query.walletId,
})
const total=ref(0)
const reset = () => {
    filterParams.value = {
        current: 1,
        size: 10,
    }
    getTradeListData()
}
const tradeListData = ref([])
const getTradeListData = async () => {
    try {
        const startTime = filterParams.value.date ? filterParams.value.date[0] : undefined;
        const endTime = filterParams.value.date ? filterParams.value.date[1] : undefined;
        const {keywords,walletId,current,size}= filterParams.value;
        const params = {
            startTime,
            endTime,
            businessUserId: tenantId.value,
            businessType: 1,
            keywords,
            walletId,
            current,
            size
        }
        const res = await getTradeList(params);
        tradeListData.value = res.data.list || [];
        total.value = res.data.total || 0;
    } catch (error) {

    }
}
const myAccountOptions=ref([])
const getWalletAccountListData=async ()=>{
    try {
        const res= await getWalletAccountList(tenantParams);
        myAccountOptions.value=res.data.map(v=>({
            label:v.memberName,
            value:v.walletId
        }))
    } catch (error) {
        
    }
   
}
onMounted(() => {
    getTradeListData();
    getWalletAccountListData()
})
</script>

<style lang="scss" scoped>
.params-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
}

.table {
    border: $border;

    ::v-deep(.el-table tr) {
        height: 46px;

        .is-link {
            color: $topic;
        }

        td,
        th {
            border-bottom: $border !important;
        }

        .cell {
            display: flex;
            justify-content: center;
        }
    }

    ::v-deep(.el-table thead tr) {
        background: #F2F6FC;

        >th {
            background: transparent;
            text-align: center;
        }

        .el-table-fixed-column--right {
            background: #F2F6FC;
        }

    }

    ::v-deep(.el-table tbody tr:nth-child(even)) {
        background: #F2F6FC;
    }

    ::v-deep(.el-table tbody tr:last-child) {
        td {
            border-bottom: none !important;
        }

    }

    ::v-deep(.el-table__inner-wrapper) {
        &::before {
            display: none;
        }
    }
}
</style>